<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<!-- <link href="http://fonts.googleapis.com/css?family=Arvo"
	rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bevan"
	rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" type="text/css" href="../../css/style.css" />

<script type="text/javascript" src="../js/httpRequest.js"></script>
<script type="text/javascript">

//idResult
function idResult(){
	window.open("../memv","","");
}




//id찾기 버튼 클릭시search_id
function search_id(){
	var id_pwd = document.getElementById("id_pwd");
	var id_form = document.getElementById("id_form");
	id_pwd.style.display='none';
	id_form.style.display='block';
	
}

//pwd찾기 버튼 클릭시
function search_pwd(){
	var id_pwd = document.getElementById("id_pwd");
	var pwd_form = document.getElementById("pwd_form");
	id_pwd.style.display='none';
	pwd_form.style.display='block';
}

//ID찾기#1
function idSearch(f){
	var name = f.name.value;

	var birth_y = f.birth_y.value;
	var birth_m = f.birth_m.value;
	var birth_d =f.birth_d.value;
	
	sendRequest("../ajax/id_search.jsp", 
			"name=" + encodeURIComponent(name) + "&birth_y=" + birth_y
											   + "&birth_m=" + birth_m
											   + "&birth_d=" + birth_d
			, 
			idSearchResult, "POST");
	
}
//ID찾기#2.힌트출력
function idSearchResult(){
	if(xhr.readyState ==4 && xhr.status==200){
		var id = eval(xhr.responseText);
		alert(id[0].result);
		
		if(id[0].result=="no_name")
			alert("회원이 아니십니다.");
		else if(id[0].result=="accord"){
			/* var id2 = id[1].id.length;
			alert(id2); */
			alert("아이디는" + id[1].id +" 입니다.");
		}
		else if(id[0].result=="discord")
			alert("이름과 생일이 불일치 합니다.");
		
	}
}

//PWD찾기#1.아이디확인후 힌트받기.
function idConfirm(f){
	//아이디 받기
	var id = f.id.value;
	
	sendRequest("../ajax/id_confirm.jsp", 
			"id=" + id, 
			idConfirmResult, "POST");
}

function idConfirmResult(){
	
	if(xhr.readyState==4 && xhr.status==200){
		var id = eval(xhr.responseText);
		if(id[0].result=="no_id")
			alert("존재하지않은 아이디입니다.");
	
		else{
			alert(id[0].result);
			p.question.value=id[0].result;
			
		}
	}
	
}

//PWD찾기#2.힌트답변 맞는지 확인!
function pwdSearch(f){
	var id=f.id.value;
	var answer=f.answer.value;
	
	sendRequest("../ajax/pwd_search.jsp", 
			"id=" + id + "&answer=" + answer,
			pwdSearchResult, "POST");
}

function pwdSearchResult(){
	
	if(xhr.readyState==4 && xhr.status==200){
		var id = eval(xhr.responseText);
		if(id[0].result =="fail")
			alert("질문에 대한 답변이 일치하지 않습니다.");
		else
			alert("비밀번호는:" + id[0].result + " 입니다.");
	}
}



</script>

</head>

<body>
<div id = "content" style="height: 350px" >
	
			<div id = "id_pwd" align="center">
			<form id="i">
			<h2>ID/PW찾기<br>
			</h2>
			<table align="center" border="0" style="padding: 50px">
			<tr>
				<td style="padding: 20px"><input type="button" class ="pink_button" value="ID 찾기" onclick="search_id()" style="width:80pt;height:40pt;" ></td>
				<td style="padding: 20px"><input type="button" class ="pink_button" value="PWD 찾기" onclick="search_pwd()" style="width:80pt;height:40pt;"></td>
			<tr>
			</table>
			</form>
			</div>
			
			
			
			<div id ="id_form"  style="display:none;" align="center">
			<form id="id_search">
			<h2>ID찾기</h2>
			<table  cellpadding="1" align="center" border="0">
			<tr>
				<td class="inform1" style="font-size: large;;">이름</td>
				<td style="padding: 5px"><input type="text" id="name"></td>
			</tr>
			
			<tr>
					<td class="inform1" style="font-size: large;" >생년월일</td>
					<td class="inform2"><select name='birth_y'>
							<option selected value=''>선택</option>
							<c:forEach begin="1960" end="2002" step="1" var="year">
								<option value='${year}'>${year}</option>
							</c:forEach>
					</select>년 <select name='birth_m'>
							<option selected value=''>선택</option>
							<c:forEach begin="1" end="12" step="1" var="month">
								<option value='${month}'>${month}</option>
							</c:forEach>
					</select>월 <select name='birth_d'>
							<option selected value=''>선택</option>
							<c:forEach begin="1" end="31" step="1" var="day">
								<option value='${day}'>${day}</option>
							</c:forEach>
					</select>일&nbsp;&nbsp;
				</tr>	
			
			<tr>
				<td colspan="3" align="center" style="padding: 10px">
				<input type="button" class="pink_button" value="ID찾기" onclick="idSearch(this.form)"></td>
			</tr>
						
			</table>
			</form>
			</div>
			
			
			<div id ="pwd_form" style="display:none;" align="center">
			<form id="p">
			<h2>PWD찾기</h2>
			<table cellpadding="1" align="center" border="0" >
			<tr>
				<td class="inform1" style="padding: 5px">ID</td>
				<td class="inform1"> <input type="text" id="id">
				<td style="padding: 5px"><input type="button" class ="pink_s_button" value="ID검색" onclick="idConfirm(this.form)"></td>
							
			</tr>
			
			<tr>
				<td class="inform1" style="padding: 5px">비밀번호확인질문</td>
				<td colspan="2"><input type="text" id="question" value=""></td>
			</tr>
			
			<tr>
				<td class="inform1" style="padding: 5px">비밀번호확인대답</td>
				<td colspan="2"><input type="text" id="answer"></td>
			</tr>
			
			
			<tr>
				<td colspan="3" align="center" style="padding: 10px">
				<input type="button"  value="PWD찾기" class="pink_button"
				onclick="pwdSearch(this.form)"></td>
			</tr>
			
			</table>
			</form>				
			</div>
			
</div>

</body>
</html>